<style lang="less">
.order-item {
  position: relative;
  width: 100%;

  .img {
    width: 100%;
  }

  .order-props {
    padding-left: 10px;
    .title {
      font-size: 16px;
    }

    .created {
      font-size: 14px;
    }

    .status {
      color: red;
      text-align: right;
    }
  }
}
</style>

<template>
  <div class="order-item" @click="handleClick">
    <nut-row>
      <nut-col :span="12">
        <div class="img">
          <nut-image :src="cfg.imageUrl(props.data.thumb)" fit="cover" />
        </div>
      </nut-col>
      <nut-col :span="12">
        <div class="order-props">
          <div class="title">{{ props.data.title }}</div>
          <nut-divider />
          <div class="created">{{ timeFormatter(props.data.createdAt, 'yyyy/MM/DD HH:mm') }}</div>
          <div class="status">{{ statusFormatter(props.data.status) }}</div>
        </div>
      </nut-col>
    </nut-row>
  </div>
  <nut-divider />
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { OrderListItem } from '@/config/types'
import cfg from '@/config/config'
import { timeFormatter, statusFormatter } from '@/util/utils'

interface Props {
  data: OrderListItem
}

const props = defineProps<Props>()
const router = useRouter()
const handleClick = () => {
  router.push({ name: 'my_order_detail', params: { sn: props.data.orderNo } })
}
</script>
